<template>
	<!-- 首页免费方案查看更多 热门推荐 -->
	<view class="container">
		<uni-nav-bar class="nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<view class="tab-nav flex-r ac jc">
				<text class="color-grey" v-for="(item,index) in tabList" :class="{'active': tabCur == index}" :key="index" @tap="tabChange(index)">{{item}}</text>
			</view>
		</uni-nav-bar>
		<template v-for="(item, index) in tabList">
			<keep-alive>
				<view class="body flex-c" :key="index" v-if="tabCur == index" @touchstart="touchStart" @touchend="touchEnd">
					<ArticleList v-if="recLists[tabCur]" :list="recLists[tabCur]" :showSP="false" :remark="true"></ArticleList>
					<EmptyContent v-else top="160rpx" text="暂无更新的方案" img="qsy_zwxl" @refresh="getRecArticles(tabCur)"></EmptyContent>
					<view class="list-end flex-r mb20" v-if="tabData[tabCur].isEnd">
						<text>已经到底啦～</text>
					</view>
				</view>
			</keep-alive>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recLists: [],
				
				tabList: ['推荐', '免费方案', '足球', '篮球'],
				tabCur: 0,
				tabData: [
					{pageNo: 1, isEnd: false, scrollTop: 0},
					{pageNo: 1, isEnd: false, scrollTop: 0},
					{pageNo: 1, isEnd: false, scrollTop: 0},
					{pageNo: 1, isEnd: false, scrollTop: 0}
				],
				show: [],
				navBorder: false
			}
		},
		onLoad(option) {
			if(this.$Route.query.tabCur){
				this.tabCur = this.$Route.query.tabCur
			}
			this.getRecArticles(this.tabCur)
		},
		onReachBottom() {
			if(!this.tabData[this.tabCur].isEnd){
				this.getRecArticles(this.tabCur)
			}
		},
		onPageScroll(e) {
			this.tabData[this.tabCur].scrollTop = e.scrollTop
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			//选项卡切换
			tabChange(index) {
				this.tabCur = index;
				if(!this.recLists[index]){
					this.getRecArticles(index)
				}
				this.$nextTick(()=>{
					uni.pageScrollTo({
						scrollTop: this.tabData[index].scrollTop,
						duration: 0
					});
				})
			},
			//推荐料
			getRecArticles(type=0) {
				this.$http.post({
					url: type != 1 ? '/api/user/article/recommendV' : '/api/user/article/recommend/free',
					data: {
						enablePay: type != 1 ? 1 : 2,
						finish: 2,
						pageNo: this.tabData[type].pageNo,
						pageSize: 15,
						sportId: type > 1 ? type - 1 : null
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.$set(this.recLists, type, data.result.records)
						}else{
							this.recLists[type].push(...data.result.records)
						}
						this.tabData[type].isEnd = data.result.current >= data.result.pages
						this.tabData[type].pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//展开折叠比赛
			showEvent(index) {
				this.$set(this.show, index, !this.show[index])
			},
			//触摸滑动开始
			touchStart(e) {
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			//触摸滑动结束
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.tabCur > 0){
							this.tabChange(this.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.tabList.length - 1;
						if(this.tabCur < maxlen){
							this.tabChange(this.tabCur + 1)
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.nav{
			.tab-nav{
				width: 100%;
				font-size: 36rpx;
				font-weight: 500;
				justify-content: space-around;
				.color-grey{
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					&.active{
						color: #333333;
						background: #fff url("~@/public/images/public/hk.png") center center/64rpx 64rpx no-repeat;
					}
				}
			}
			.left{
				width: 48rpx;
				height: 48rpx;
				margin-left: 20rpx;
			}
		}
		.body{
			padding: 0 20rpx var(--safe-area-inset-bottom);
			min-height: calc(var(--safe-height) - #{$navbar-height});
		}
	}
</style>
